<template>
<view class="container">
    <form bindsubmit="formSubmit">
        <view class="modify">
            <input :placeholder="placeholder" :value="userInfo.nickname" name="value" bindfocus="inputBg" bindblur="inputBg" :style="'background:' + inputBg"></input>
        </view>
        <view class="remind"><lang keywords="以英文字母或汉字开头，限4-16个字符"></lang></view>
        <button class="block_btn mlr20" formType="submit" :style="'background:' + config.config.mobile_head_color"><lang keywords="确定"></lang></button>
    </form>
</view>

</template>

"<script>
import common from '../../utils/common.js'
var app = getApp();
var newName = '';

export default {
  data() {
    return {
      userInfo: {},
      inputBg: 'white',
      placeholder: '请填写昵称'
    };
  },

  onUnload: function () {// 页面关闭
  },
  onHide: function () {// 页面隐藏
  },
  onShow: function () {// 页面显示
  // #ifdef H5
  common.hideWxShare()
  // #endif
  },
  onReady: function () {// 页面渲染完成
  },
  onLoad: function () {
    var that = this;
    common.setMainColor(this); //调用应用实例的方法获取全局数据

    common.getTxtKey('修改昵称').then(key => {
      wx.setNavigationBarTitle({
        title: key
      });
    }, () => {});
    common.getTxtKey(that.placeholder).then(key => {
      that.setData({
        placeholder: key
      });
    }, () => {});
    common.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      }); //console.log(that.data.userInfo);
    });
  },
  components: {},
  props: {},
  methods: {
    inputBg: function () {
      this.setData({
        inputBg: this.inputBg == 'white' ? '#ebebeb' : 'white'
      });
    },
    formSubmit: function (e) {
      console.log(e.detail);
      newName = e.detail.value.value;
      common.post('My&a=username', {
        nickname: e.detail.value.value
      }, "saveResult", this);
    },
    saveResult: function (result) {
      app.globalData.userInfo.nickname = newName;
      wx.navigateBack();
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
/* pages/my/username.css */
.modify{ padding: 10rpx 20rpx; background: #fff; border-bottom: #f1f1f1 1rpx solid;}
.modify input{ font-size: 28rpx; height: 28rpx;  padding:10rpx;  }
.remind{ padding:30rpx 20rpx 0 20rpx; line-height: 1;}
</style>